<template>
  <div class="index container-fluid bg-light pb-5">
    <!-- <div class="bg row">
      <img src="../../assets/img/web.jpg" alt="">
    </div> -->
    <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active" data-bs-interval="2000">
          <img src="../../assets/img/web.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item" data-bs-interval="2000">
          <img src="../../assets/img/web.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item" data-bs-interval="2000">
          <img src="../../assets/img/web.jpg" class="d-block w-100" alt="...">
        </div>
      </div>
    </div>
    <!-- ../../assets/img/web.jpg -->
    <div class="d-none d-md-block container-xxl px-1 pt-5">
      <card-detail></card-detail>
    </div>

    <!-- card -->
    <div class="container d-block d-sm-block d-md-none mw-100 bg-white ">
        <div class="card border-0">
          <img src="../../assets/img/c3789b818270476d9b48b8de610a626d.png" class="card-img-top" alt="">
          <div class="card-body">
            <h5 class="card-title my-2">豹子头-林冲</h5>
            <div class=" bg-black rounded-pill  position-relative bootom-0 overflow-hidden my-4">
              <a href="#" class="nav-link bg-dark">
                <h6 class="col row d-flex justify-content-between align-items-center m-0 p-0">
                  <p class="col-6 text-white my-1">
                    <span class="fs-2 me-1">199</span>
                    <span>USDT</span>
                  </p>
                  <img class="col-2 fs-1" src="" alt="">
                </h6>
              </a>
            </div>
            <p class="card-text h-25 d-flex align-items-center">
              <img class="img-fluid" style="max-width: 30px" src="https://www.ibox.com/file/oss/nft/image/nft-goods/83621e1255d3449084fcd2e34f7d2244.png" alt="">
              <span class="mx-1">NFT Hero</span>
              <span class="fs-6 bg-light px-2 rounded-pill">创作者</span>
            </p>
          </div>
        </div>
      </div>
      
    <!-- 发现NFT -->
    <div class="container-xxl px-0 mt-5 mx-0 d-flex justify-content-center flex-column mx-auto">
      <div class="row d-flex justify-content-center flex-column">
        <h2 class="d-sm-block d-md-none"><strong>发现NFT</strong></h2>
        <div class="cd d-flex justify-content-between flex-wrap">
            <card class="col-6 my-2 col-md-4 text-black" v-for="(item,index) in lists" :key="index"></card>
        </div>
        <div class="mx-auto text-center border rounded-pill border-dark border-2 col-md-4 col-6 my-2">
          <a href="#/details" class="text-decoration-none text-black d-block py-2 py-md-3"><small>查看更多</small></a>
        </div>
      </div>
    </div>
    
    <!-- 购买NFT -->
    <div class="container-xxl mt-5 mx-auto d-flex justify-content-between flex-column align-items-start px-1">
      <h1 class="mx-md-auto"><strong>如何购买NFT</strong></h1>
      <p class="d-none d-md-block mx-auto mb-5 text-left">开启全新的数字艺术收藏之旅</p>
      <card-graphic></card-graphic>
      <div class="mx-auto text-center border rounded-pill border-dark border-2 col-md-4 col-6  my-2 h6">
        <a href="#" class="text-decoration-none text-black d-block py-2 py-md-3"><small>前往帮助中心查看更多</small></a>
      </div>
    </div>
    <!-- NFT交易平台 -->
    <div class="container-xxl px-0 mt-5 mx-0 d-flex justify-content-between flex-column align-items-start mx-auto px-1">
      <div class="row d-flex justify-content-center flex-column">
        <h4 class="text-md-center"><strong>ibox.com</strong></h4>
        <h2 class=" text-center">全球领先的NFT交易平台</h2>
        <h6 class="col-md-7 text-center mx-auto text-muted mb-md-5"><small>未来是一个万物上链的数字世界，NFT应用不再局限于艺术品、收藏品、游戏，将会扩展到数字身份、版权许可、品牌授权等，iBox的使命是：促进全球资源的价值流通，为构建高效运转的数字世界提供基础服务。</small></h6>
        <div class="d-flex justify-content-between align-items-start flex-wrap p-0 m-0">
          <card-text></card-text>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import card from '../../components/card/card.vue'
import cardDetail from '../../components/card/card-detail.vue'
import cardGraphic from '../../components/card/card-graphic.vue'
import cardText from '../../components/card/card-text.vue'
export default {
  name: "index",
  data() {
    return {
      lists: Array(6).fill(' ')
    };
  },
  created() {
      
  },
  methods: {
    goTo(url){
      this.$router.push(url)
    }
  },
  components: {
    card,
    cardGraphic,
    cardText,
    cardDetail
  }
};
</script>
<style scoped>
.rounded-3{
  width: 100%;
}
</style>